<template>
  <el-row class="menu_page">
    <h1 style="text-align:center;">同一场景角色列表</h1>
    <el-col>
      <template>
        <el-table :data="map_player_list">
          <el-table-column prop="user_exp" label="灵力" width="60"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="65"> </el-table-column>
          <el-table-column prop="status" label="状态" width="60"></el-table-column>
          <el-table-column prop="speed" label="操作" width="70">
            <template slot-scope="scope">
              <span v-if="scope.row._id != user_info.id">
                <el-button
                  type="primary"
                  icon="edit"
                  size="small"
                  v-if="scope.row.status == '0'"
                  @click="attack(scope.row._id)"
                  >攻击</el-button
                >
                <el-button
                  type="primary"
                  icon="edit"
                  size="small"
                  v-if="scope.row.status == '1'"
                  @click="attack()"
                  disabled
                  >攻击</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "right-menu",
  data() {
    return {
      map_player_list: [],
      battle_log: "",
    };
  },
  computed: {
    user_info() {
      console.log(this.$store.getters.user);
      return this.$store.getters.user;
    },
  },
  created() {
    this.getNowMapPlayer();
  },
  methods: {
    getNowMapPlayer() {
      // 获取地图角色数据
      let mid = this.user_info.now_map;
      console.log("mid", mid);
      let url = `api/maps/getplayer/${mid}`;
      this.$axios
        .get(url)
        .then((res) => {
          this.map_player_list = res.data;
        })
        .catch((err) => console.log(err));
    },
    attack(uid) {
      // 攻击接口
      this.$axios
        .post(`/api/battles/player/${uid}`)
        .then((res) => {
          this.battle_log = res.data;
          this.getUserInfo();
          console.log(res.data);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>
<style scoped>
.menu_page {
  position: fixed;
  top: 71px;
  right: 0;
  min-height: 100%;
  background: #fffedef8;
  z-index: 99;
}
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  width: 35px;
}
.el-submenu .el-menu-item {
  min-width: 180px;
}
</style>

